<script setup>
import {ref} from "vue"
import request from '@/api/request'
import {ElMessage} from 'element-plus'
import {Plus} from '@element-plus/icons-vue'

let emits = defineEmits(["ref-table"])

// 使用 ref 并正确初始化
let material = ref({
    materialId: '',
    materialName: '',
    specificationsAndModels: '',
    unit: '',
    materialOrProduct: '',
    category: '',
    isEnabled: '0',
    materialRatio: '1',
    cost: 0.01,
    material_weight: 0,
})

let unit1 = ref([])
let classifyName1 = ref([])
let num1 = ref(200)
let num2 = ref(5000)
const autoGenerate = ref(false)

let select = () => {
    request({
        url: '/material/Name',
        method: 'get'
    }).then(res => {
        unit1.value = res.data.records
    })
}
select()

let select1 = () => {
    request({
        url: '/classify/Name',
        method: 'get'
    }).then(res => {
        classifyName1.value = res.data.records
    })
}
select1()

// 修复 el-switch 的 change 事件处理函数（使用 ref 的正确方式）
const handleAutoGenerate = (val) => {
    if (val) {
        // 自动生成物料编码
        material.value.materialId = 'MAT' + new Date().getTime()
    } else {
        material.value.materialId = ''
    }
}

let onSubmit = () => {
    // 注意：使用 ref 时需要通过 .value 访问属性
    if (!material.value.materialId) {
        ElMessage.warning('物料编码不能为空')
        return
    }

    if (!material.value.materialName) {
        ElMessage.warning('物料名称不能为空')
        return
    }

    request({
        url: '/material/insert',
        method: 'post',
        data: {
            // 注意：这里需要传递 material.value 而不是 ...material.value
            ...material.value
        }
    }).then(res => {
        if (res.code !== 200) {
            ElMessage.error(res.message || res.data)
        } else {
            ElMessage.success('添加成功')
            emits("ref-table")
            // 重置表单
            material.value = {
                materialId: '',
                materialName: '',
                specificationsAndModels: '',
                unit: '',
                materialOrProduct: '',
                category: '',
                isEnabled: '0',
                materialRatio: '1'
            }
            autoGenerate.value = false
        }
    }).catch(error => {
        ElMessage.error('请求失败: ' + error.message)
    })
}

const handleChange1 = (value) => {
    num1.value = value
}

const handleChange2 = (value) => {
    num2.value = value
}

// 选项卡
const activeName = ref('first')
</script>

<template>
    <div>
        <el-card>
            <template #header>
            </template>
            <el-form ref="form" :inline="false" :model="material" class="card_wrap" label-width="120px" size="default">
                <div class="form-row">
                    <el-form-item class="c_item" label="* 物料编码">
                        <el-input
                            v-model="material.materialId"
                            :readonly="autoGenerate"
                            style="width: 150px;"
                        ></el-input>
                        <el-switch
                            v-model="autoGenerate"
                            active-text="自动生成"
                            style="margin-left: 10px;"
                            @change="handleAutoGenerate"
                        />
                    </el-form-item>
                    <el-form-item class="c_item" label="* 物料名称">
                        <el-input v-model="material.materialName" style="width: 150px;"></el-input>
                    </el-form-item>
                </div>

                <el-form-item class="c_item_big" label="规格型号">
                    <el-input
                        v-model="material.specificationsAndModels"
                        placeholder="请输入规格型号"
                        style="width: 800px;">
                    </el-input>
                </el-form-item>


                <div class="form-row">
                    <el-form-item class="c_item" label="* 单位">
                        <el-select v-model="material.unit" placeholder="单位" style="width: 150px;">
                            <el-option
                                v-for="intm in unit1"
                                :key="intm.unitName"
                                :label="intm.unitName"
                                :value="intm.unitName">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item class="c_item_big" label="物料重量" prop="material_weight">
                        <el-input-number v-model="material.material_weight" :max="10000" :min="1" placeholder="1"/>
                    </el-form-item>

                    <el-form-item class="c_item" label="物料/产品">
                        <el-select v-model="material.materialOrProduct" placeholder="选择" style="width: 150px;">
                            <el-option label="物料" value="物料"></el-option>
                            <el-option label="产品" value="产品"></el-option>
                        </el-select>
                    </el-form-item>
                </div>

                <el-form-item class="c_item_big" label="产品成本">
                    <el-input-number v-model="material.cost" :max="10000" :min="0.01" placeholder="0.01"/>
                </el-form-item>

                <div class="form-row">
                    <el-form-item class="c_item" label="所属分类">
                        <el-select
                            v-model="material.category"
                            placeholder=""
                            style="width: 800px;">
                            <el-option
                                v-for="intm in classifyName1"
                                :key="intm.classifyName"
                                :label="intm.classifyName"
                                :value="intm.classifyName">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>

                <el-form-item class="c_item" label="是否启用">
                    <el-radio-group v-model="material.isEnabled">
                        <el-radio size="large" value="0">是</el-radio>
                        <el-radio size="large" value="1">否</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item class="c_item" label="是否安全库存">
                    <el-radio-group v-model="material.materialRatio">
                        <el-radio size="large" value="0">是</el-radio>
                        <el-radio size="large" value="1">否</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item v-if="material.materialRatio==='0'" label="库存预警值">
                    <el-input-number
                        v-model="material.safetyStock"
                        :max="2000"
                        :min="1"
                        @change="handleChange1"
                    />
                </el-form-item>


                <el-form-item>
                    <el-button class="right-bottom" type="primary" @click="onSubmit">确定新增</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<style scoped>
/* 样式部分保持不变 */
.card-header {
    font-size: 18px;
    font-weight: bold;
}

.c_item {
    flex: 1;
    margin: 0px 5px 15px 0;
    width: calc((100% - 10px) / 2);
    min-width: calc((100% - 10px) / 2);
    max-width: calc((100% - 10px) / 2);
}

.c_item_big {
    flex: 2;
    margin: 0px 5px 15px 0;
    width: calc((100% - 10px) / 1);
    min-width: calc((100% - 10px) / 1);
    max-width: calc((100% - 10px) / 1);
}

.card_wrap {
    width: 98%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.form-row {
    display: flex;
    width: 100%;
}

.upload-tip {
    color: #999;
    font-size: 12px;
    margin-top: 10px;
}

.right-bottom {
    margin-top: 50px;
    margin-left: 100px;
}
</style>